<template>
  <!-- 添加或修改菜单对话框 -->
  <!-- custom-class
       form 弹窗 默认必加--------------------------------------------------------
       dialogForm            =>  默认控制样式区域 管理部分公用样式
       form 弹窗 按布局格式添加 --------------------------------------------------
       dialogFormItemUDForm  =>  控制 form-item (label 、content) 上下布局样式 控制
       dialogFormItemLRForm  =>  控制 form-item (label 、content) 左右布局样式 控制
  -->
  <el-dialog v-loading="dialogFormLoading" :title="dialogFormTitle" custom-class="dialogForm dialogFormItemUDForm" :visible.sync="dialogFormVisibleBool" width="600px" :show-close="false">
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormType!=='view'?dialogRules:{}"
             :class="dialogFormType==='view'?'formTable p-px-t-14':'p-px-t-4'" :label-width="dialogFormType==='view'?(4* 1.4 + 1.2 + 1.2 + 'rem' ):''">
      <el-row class="formRow" :gutter="dialogFormType==='view'?0:24">
        <el-col :span="24">
          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model.trim=" dialogForm.dictName" placeholder="请输入字典名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字典类型" prop="dictType">
            <el-input v-model.trim=" dialogForm.dictType" placeholder="请输入字典类型" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model.trim=" dialogForm.status">
              <el-radio
                v-for="dict in sysNormalDisableOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim=" dialogForm.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      <el-button @click="dialogResetFormMixins">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 混入
import { dialogFormMixins } from '@/mixins/publicMixins/dialogFormMixins'
// -------------------------------------------------------------
export default {
  name: 'DictDialog',
  mixins: [dialogFormMixins],
  data() {
    return {
      // 表单参数
      dialogForm: {
      },
      dialogRules: {
        dictName: [
          { required: true, message: '字典名称不能为空', trigger: 'blur' }
        ],
        dictType: [
          { required: true, message: '字典类型不能为空', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.getDictMixins('sysNormalDisableOptions', 'sys_normal_disable')
  },
  mounted() {

  },
  methods: {

    /**
     * @description: 重新打开弹窗是赋初始值
     * @Author: baoxuhui
     * @return {*}
     */
    dialogResetForm() {
      this.dialogForm = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: '0',
        remark: undefined
      }
      this.resetForm('dialogForm')
    },
    /**
    * @description: 保存
    * @Author: baoxuhui
    * @return {*}
    */
    dialogSubmitForm() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          let url = null; let type = null
          if (this.dialogForm.dictId !== undefined) {
            url = '/system/dict/type/edit'
            type = '修改'
          } else {
            url = '/system/dict/type'
            type = '新增'
          }
          this.dialogSaveOrUpdateMixins(url, this.dialogForm, type)
        }
      })
    },

    /**
     * @description: 调取详情
     * @Author: baoxuhui
     * @return {*}
     */
    dialogDetailApi(row) {
      const url = '/system/dict/type/' + row.dictId
      this.dialogGetDetailMixins(url)
    },
    /**
     * @description: 详情回显
     * @Author: baoxuhui
     * @param {*} id
     * @return {*}
     */
    dialogFormDetail(res) {
      const data = res.data
      this.dialogForm = data
      this.dialogFormLoading = false
    }

  }
}
</script>
